import React, {Component} from 'react';

class CartList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cartList: this.props.store.getState(),
        }
    }

    sub = (goodsId) => {
        /* 通过dispatch进行任务的派发，修改仓库的数据*/
        console.log('sub', goodsId);
        this.props.store.dispatch({type: 'sub', goodsId});

    }

    add = (goodsId) => {
        console.log('add', goodsId);
        this.props.store.dispatch({type: 'add', goodsId});
    }

    componentDidMount() {
        /*视图需要订阅一下仓库最新的数据信息*/
        /*当订阅数据后，一旦仓库的数据变化， subscribe 里面的函数执行，该函数里面调用 setState 这个api ，当setState 修改组件的状态后，会导致 组件的 render 执行*/
        this.props.store.subscribe(() => {
            this.setState({
                cartList: this.props.store.getState(),
            })
        })

    }

    render() {
        return (
            <div>
                <h2>CartList组件-兄弟关系</h2>
                <hr/>
                {
                    this.state.cartList.map(item => {
                        return (
                            <ul key={item.id}>
                                <li>序号：{item.id}</li>
                                <li>名称：《{item.goodsName}》</li>
                                <li>价格 ¥：{item.goodsPrice}</li>
                                <li>
                                    <button onClick={() => {
                                        this.sub(item.id)
                                    }}>-
                                    </button>
                                    <i>{item.number}</i>
                                    <button onClick={() => {
                                        this.add(item.id)
                                    }}>+
                                    </button>
                                </li>
                                <li>小计：{item.goodsPrice * item.number}</li>
                            </ul>
                        )
                    })
                }

            </div>
        );
    }
}

export default CartList;
